<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
// import crudMoney from '@/api/money'
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import { debounce } from '@/utils'
export default {
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '600px'
    }
  },
  data() {
    return {
      chart: null,
      data: {}
    }
  },
  mounted() {
    this.__resizeHandler = debounce(() => {
      if (this.chart) {
        this.chart.resize()
      }
    }, 100)
    window.addEventListener('resize', this.__resizeHandler)
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    window.removeEventListener('resize', this.__resizeHandler)
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      // console.log(this.data.xAxis)
      this.chart = echarts.init(this.$el, 'macarons')
      this.chart.setOption({
        color: ['#4fd7fd', '#b2f567'],
        legend: {},
        toolbox: {
          iconStyle: {
            color: 'white',
            borderColor: 'grey'

          },
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function(params) {
            if (params.length === 6) {
              console.log(params)
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[1].seriesName + '：' + params[1].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[2].seriesName + '：' + params[2].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[3].seriesName + '：' + params[3].data + '元</span>' + '<br>' +
                    params[1].marker + '<span style="color:black">' + params[4].seriesName + '：' + params[4].data + '元</span>' + '<br>' +
                    params[1].marker + '<span style="color:black">' + params[5].seriesName + '：' + params[5].data + '元</span>' + '<br>'
            } else if (params.length === 5) {
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[1].seriesName + '：' + params[1].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[2].seriesName + '：' + params[2].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[4].seriesName + '：' + params[4].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[3].seriesName + '：' + params[3].data + '元</span>'
            } else if (params.length === 4) {
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[1].seriesName + '：' + params[1].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[3].seriesName + '：' + params[3].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[2].seriesName + '：' + params[2].data + '元</span>'
            } else if (params.length === 3) {
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[2].seriesName + '：' + params[2].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[1].seriesName + '：' + params[1].data + '元</span>'
            } else if (params.length === 3) {
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>' + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[1].seriesName + '：' + params[1].data + '元</span>'
            } else {
              return params[0].name + '<br>' +
                    params[0].marker + '<span style="color:black">' + params[0].seriesName + '：' + params[0].data + '元</span>'
            }
          },
          backgroundColor: 'rgba(0, 44, 140, 0.50)', // 设置自定义背景
          animation: true,
          animationDuration: 20000,
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: 'red'
            }
          }
        },
        // grid: {
        //   show: false,
        //   backgroundColor: 'white',
        //   borderColor: 'black',
        //   borderWidth: 1
        // },
        xAxis: [{
          type: 'category',
          data: this.data.xAxis,
          axisTick: {
            alignWithLabel: true
          }
          //   axisLabel: {
          //     textStyle: {
          //       fontSize: '12',
          //       color: 'red'
          //     }
          //   },
          //   axisLine: {
          //     show: true,
          //     lineStyle: {
          //       color: 'black',
          //       width: 1,
          //       type: 'solid'
          //     }
          //   }

        }],
        yAxis: [{
        //   splitLine: { show: false },
          name: '元',
          type: 'value'
        //   axisLabel: {
        //     textStyle: {
        //       fontSize: '12',
        //       color: 'red'
        //     }
        //   },
        //   axisLine: {
        //     show: true,
        //     lineStyle: {
        //       color: 'black',
        //       width: 1,
        //       type: 'solid'
        //     }
        //   }
        },
        {

        }
        ],
        series: [
          {
            name: '银行卡',
            type: 'line',
            data: this.data.yAxis.card,
            barWidth: 15,
            markPoint: {
              data: [{ type: 'max' }]
            }

          },
          {
            name: '微信',
            type: 'line',
            data: this.data.yAxis.wx,
            barWidth: 15,
            markPoint: {
              data: [{ type: 'max' }]
            }

          },
          {
            name: '支付宝',
            type: 'line',
            data: this.data.yAxis.pay,
            barWidth: 15,
            markPoint: {
              data: [{ type: 'max' }]
            }

          },
          {
            name: '借',
            type: 'line',
            yAxisIndex: 1,
            data: this.data.yAxis.lend
          },
          {
            name: '证券',
            type: 'line',
            data: this.data.yAxis.bond,
            barWidth: 15,
            markPoint: {
              data: [{ type: 'max' }]
            }
          },
          {
            name: '总和',
            type: 'line',
            data: this.data.yAxis.sum,
            barWidth: 15,
            markPoint: {
              data: [{ type: 'max' }]
            }
          }

        ]
      })
      var that = this
      this.chart.on('click', function(params) {
        that.$router.push({
          path: '/daily/spend',
          query: { date: params.name }
        })
      })
    }
  }
}
</script>
